<template>
  <el-dialog
    v-model="visible"
    title="查看详情"
    width="80%"
    class="custom-dialog"
    :close-on-click-modal="false"
  >
    <div class="main-content-container">
      <!-- 直接显示右侧内容，不包含左侧选项卡 -->
      <div class="right-content">
        <el-descriptions :column="1" border class="custom-descriptions">
          <el-descriptions-item label="退货编号">
            {{ returnGoodsData.returnNumber || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="关联合同">
            {{ returnGoodsData.contractName || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="关联合同编号">
            {{ returnGoodsData.contractNumber || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="客户名称">
            {{ returnGoodsData.customerName || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="销售人员">
            {{ returnGoodsData.salesPerson || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="退货物料">
            {{ returnGoodsData.materialName || '-' }}
          </el-descriptions-item>
          
          <!-- 退货产品列表 -->
          <el-descriptions-item label="退货产品列表" :span="2">
            <el-table
              :data="returnGoodsData.productList || []"
              style="width: 100%"
              border
            >
              <el-table-column
                prop="productCode"
                label="产品编号"
                width="150"
              />
              <el-table-column
                prop="materialContent"
                label="物料内容"
              />
              <el-table-column
                prop="demand"
                label="关联需求"
                sortable
              />
              <el-table-column
                prop="productionOrder"
                label="生产加工单"
                sortable
              />
              <el-table-column
                label="操作"
              >
                <template #default>
                  <el-button text size="small" class="link-button">查看参数</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-descriptions-item>
          
          <el-descriptions-item label="退货物流单号">
            {{ returnGoodsData.logisticsNumber || '-' }}
            <el-button
              v-if="returnGoodsData.logisticsNumber"
              text
              size="small"
              @click="copyToClipboard(returnGoodsData.logisticsNumber)"
              class="copy-button"
            >
              <el-icon><CopyDocument /></el-icon>
              <span>可复制</span>
            </el-button>
          </el-descriptions-item>
          
          <el-descriptions-item label="退货地址">
            {{ returnGoodsData.returnAddress || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="退货联系人">
            {{ returnGoodsData.contactPerson || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="退货联系方式">
            {{ returnGoodsData.contactPhone || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="退货原因">
            {{ returnGoodsData.returnReason || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="操作人">
            {{ returnGoodsData.operator || '-' }}
          </el-descriptions-item>
          
          <el-descriptions-item label="退货时间">
            {{ returnGoodsData.returnTime || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { CopyDocument } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  returnGoodsData: {
    type: Object,
    default: () => ({
      returnNumber: 'THBH001',
      contractName: '退货了的合同名称',
      contractNumber: 'HTBH001',
      customerName: '某某某公司',
      salesPerson: '张三(zhangsan)',
      materialName: '防火门',
      productList: [
        {
          productCode: 'CPBH001',
          materialContent: '防火门/二级分类/木质门框',
          demand: '需求1',
          productionOrder: 'SCJHD001'
        },
        {
          productCode: 'CPBH002',
          materialContent: '防火门/二级分类/木质门框',
          demand: '需求1',
          productionOrder: 'SCJHD001'
        },
        {
          productCode: 'CPBH003',
          materialContent: '防火门/二级分类/木质门扇',
          demand: '需求2',
          productionOrder: 'SCJHD004'
        }
      ],
      logisticsNumber: 'THWLDDH001',
      returnAddress: '湖北省武汉市汉阳区xxxxx',
      contactPerson: '张三(zhangsan)',
      contactPhone: '15000000000',
      returnReason: '产品型号不对',
      operator: '张三(zhangsan)',
      returnTime: '2025-04-05 19:40:03'
    })
  }
})

const emit = defineEmits(['update:modelValue', 'close'])

// 使用独立的visible状态来控制弹窗
const visible = ref(props.modelValue)

// 监听props.modelValue的变化，更新visible状态
watch(() => props.modelValue, (newValue) => {
  visible.value = newValue
}, { immediate: true })

// 监听visible状态的变化，向父组件发送update:modelValue事件
watch(visible, (newValue) => {
  emit('update:modelValue', newValue)
})

// 关闭对话框
const closeDialog = () => {
  visible.value = false
  emit('update:modelValue', false)
  emit('close')
}

// 复制到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('复制成功')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}
</script>

<style scoped>
/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 主内容容器 */
.main-content-container {
  display: flex;
  width: 100%;
}

/* 右侧内容区域 */
.right-content {
  flex: 1;
  padding: 0;
}

/* 自定义描述列表样式 - 调整间距 */
.custom-descriptions {
  width: 100%;
}

:deep(.custom-descriptions .el-descriptions__item) {
  display: flex;
  /* min-height: 60px; */
  align-items: center;
}

:deep(.custom-descriptions .el-descriptions__label) {
  width: 140px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  background-color: #f5f7fa;
  padding: 18px 20px;
  border-right: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__content) {
  flex: 1;
  color: #303133;
  padding: 18px 20px;
  background-color: #ffffff;
  /* min-height: 60px; */
  display: flex;
  align-items: center;
}

/* 表格样式 - 增加表格间距 */
:deep(.custom-descriptions .el-table) {
  font-size: 14px;
  margin-top: 0;
  border-collapse: separate;
  border-spacing: 0;
}

:deep(.custom-descriptions .el-table__header th) {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  padding: 14px 12px;
}

:deep(.custom-descriptions .el-table__body td) {
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding: 14px 12px;
}

:deep(.custom-descriptions .el-table__row:hover > td) {
  background-color: #fafafa;
}

/* 调整表格容器的内边距 */
:deep(.custom-descriptions .el-descriptions__content > .el-table) {
  margin: 10px 0;
  border-radius: 4px;
  overflow: hidden;
}

/* 链接按钮样式 */
.link-button {
  color: #409eff !important;
}

.link-button:hover {
  color: #66b1ff !important;
}

/* 复制按钮样式 */
.copy-button {
  color: #ff4d4f !important;
  margin-left: 8px;
}

.copy-button:hover {
  color: #ff7875 !important;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 确保单元格边框正确显示 */
:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 6px !important;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}

/* 调整表格中的排序图标与文字的间距 */
:deep(.custom-descriptions .el-table .caret-wrapper) {
  margin-left: 4px;
}
</style>